<template>
	<view class="bigBox" id="bBox">
	<!-- <h1>我是结算页面</h1> -->
	   <view class="headerBox">
			<view class="header">自提点：无国界负一楼快递点</view>
			<view>天府二街吉泰路无国界西门红旗连锁超市旁边</view>
			<view class="map">查看地图>
			<!-- 	<view mapState="">
					<page-head :title="title"></page-head>
					<view class="uni-common-mt">
						<view>
							<map :latitude="latitude" :longitude="longitude" :markers="covers">
							</map>
						</view>
					</view>
				</view> -->
			</view>
			<view class="title">
				<!-- <view>提货人姓名：{{inputValue}}</view> -->
				<view>提货人：</view>
				<input class="input" @input="onKeyInputB" placeholder="姓名" />
				<view>电话：</view>
				<input class="input" @input="onKeyInputD" placeholder="电话" />
			</view>
			<view class="taget">切换></view>
		</view>
		<view class="mianBox">
			<!-- 头部的店家名称 -->
			<view v-for="item in arrTitle" :key="item.titleId">
				<span id="titleName">{{item.titleName}}</span>
            <!-- 标题名称下的  大容器 -->
				<view class="bigBoxSet" v-for="itemfood in item.arr" :key="itemfood.foodId">
					<!-- 循环店家里面订单的食品的  图片Box1 -->
					<view class="imgBox">
						<image mode="aspectFit" :src="itemfood.imgSrc" alt="" ></image>
					</view>
						<!-- 循环店家里面订单的食品的  Box2 名称 价格 -->
					<view class="elsBox">
						<view id="foodName">{{itemfood.foodsName}}</view>
						<view><span>￥</span>{{itemfood.price}}</view>
					</view>
					<!-- 循环店家里面订单的食品的  删除订单  添加  减少数量按钮 -->
					<!-- 删除按钮icon -->
					<view class="item" @click="cancelMenu(item,itemfood.foodId)">X</view>
					<view class="num">2件</view>
			    </view>
		    </view>
		</view>
		<view class="footerBox">
			<view class="needPay">待支付</view>
		    <button class="payBox">立即支付</button>
		</view>	
	</view>
</template>

<script>
import * as api from "../../utils/api"
/* import {map} from "@dcloudio/uni-ui" */
	export default {
		/* components: {map}, */
		data() {
			return {
				iconType: 'cancel',
				showTop:false,
				flag:false,
				title: 'input',
                focus: false,
                inputValue: '',
                changeValue: '',
				arrTitle:[
					{
					titleId:1,	
					titleName:"小猫西餐.酒馆",
					state:0,
					arr:[
					{foodId:1,imgSrc:"/static/foods1.jpg",foodsName:"坚果轻食沙拉",price:18,foodNum:1,state:0},
					{foodId:2,imgSrc:"/static/foods6.jpg",foodsName:"草莓甜甜圈",price:18,foodNum:2,state:0},
					{foodId:3,imgSrc:"/static/foods3.jpg",foodsName:"卡布奇诺",price:18,foodNum:4,state:0},
					{foodId:4,imgSrc:"/static/foods4.jpg",foodsName:"两人参",price:18,foodNum:1,state:0},
					{foodId:5,imgSrc:"/static/foods5.jpg",foodsName:"三人餐",price:18,foodNum:5,state:0},
					{foodId:6,imgSrc:"/static/foods6.jpg",foodsName:"一人餐",price:18,foodNum:6,state:0},	
				]
				},
				{
					titleId:2,	
					titleName:"小火锅",
					state:0,
					arr:[
					{foodId:1,imgSrc:"/static/foods1.jpg",foodsName:"坚果轻食沙拉",price:68,foodNum:6,state:0},
					{foodId:2,imgSrc:"/static/foods2.jpg",foodsName:"草莓甜甜圈",price:68,foodNum:1,state:0},
					{foodId:3,imgSrc:"/static/foods3.jpg",foodsName:"卡布奇诺",price:68,foodNum:5,state:0},
					{foodId:4,imgSrc:"/static/foods4.jpg",foodsName:"两人参",price:68,foodNum:4,state:0},
					{foodId:5,imgSrc:"/static/foods5.jpg",foodsName:"三人餐",price:68,foodNum:8,state:0},
					{foodId:6,imgSrc:"/static/foods2.jpg",foodsName:"一人餐",price:68,foodNum:2,state:0},
					
				]
				
				},
				],
				/* 地图部分 */
				/* title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.9085,
					longitude: 116.39747,
					// #ifdef APP-PLUS
					iconPath: '../../../static/app-plus/location@3x.png',
					// #endif
					// #ifndef APP-PLUS
					iconPath: '../../../static/location.png',
					// #endif
				}, {
					latitude: 39.90,
					longitude: 116.39,
					// #ifdef APP-PLUS
					iconPath: '../../../static/app-plus/location@3x.png',
					// #endif
					// #ifndef APP-PLUS
					iconPath: '../../../static/location.png',
					// #endif
				}] */
			}
		},
		
		onLoad() {
				uni.request({
				url:api.GET_SHOP_CART,
				data:{userId:1},
				method: 'get',
				success:(res)=>{
					this.arrTitle=res.data
				}
			})
		},
		
		methods: {
		 onKeyInputB: function(event) {
            this.inputValue = event.target.value
		},
		 onKeyInputD: function(event) {
            this.changeValue = event.target.value
        }
        
    }
	
}
</script>

<style scoped>
/* 最大的背景BOX */
#bBox{
	background-color:rgb(245,246,247);
	position: relative;
}
/* 头部的内容BOX1 */
.headerBox{
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	background-color: white;
	/* border: 1px solid red; */
	border-radius: 10px;
	margin-bottom: 10px;
}
.headerBox>view{
   padding: 5rpx 0;	
}
/* 地图样式 */
.map{
	border-bottom: 1px dashed black;
	color: red;
}
/* 提货人=== */
.title{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.input{
	width: 160rpx;
}
/* 点击切换 */
.taget{
	color: red;
	min-width: 100rpx;
	height: 50rpx;
	position: absolute;
	right: 0;
	top:0;
	/* border: 1px solid black; */
}
/* 店铺和食物BOX2 */
.mianBox{
	/* border: 1px solid black; */
	position: relative;
	padding-bottom: 80rpx;
}
#titleName{
	display: inline-block;
	font-weight: bolder;
	padding: 10rpx;
}
/* 店铺和食品的每一段 */
.bigBoxSet{
	display: flex;
	flex-direction: row;
	margin: 20rpx 0;
	position: relative;
    background-color:white;
	border-radius: 25rpx;
	/* border: 1px solid black; */
}	
/* 装图片的box */
.imgBox{
 width: 200rpx;
 height: 200rpx;	
 overflow: hidden;
 border: 1px solid rgb(245,246,247);
 background-color: white;
 border-radius: 10rpx;
 margin-right: 30rpx;
}
/* 图片 */
.imgBox>image{
	width: 100%;
	height: 100%;
}
/* 实物名称和价格的box */
.elsBox{
/* 	width: 120px; */
    padding-top: 45rpx;
	height: 120rpx;	
	display:flex;
    flex-direction:column;
	justify-content:space-around;
}
#foodName{
	/* font-size: 18rpx; */
	font-weight: bolder;
}
/* xx  取消按钮===类似删除 */
.item{
	position: absolute;
	right: 20rpx;
	top: 50rpx;
	font-weight: nomal;
	color: #868686;
}
/* food数量 */
.num{
	position: absolute;
	right: 20rpx;
	bottom: 0;
	font-weight: nomal;
	color: #868686;
}
/* 底部的支付BOX3 */
.footerBox{
   width: 100%;
   height: 100rpx;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
   position: fixed;
   left: 0;
   bottom: 0;
   background-color: white;
}
/* 待支付 */
.needPay{
   color: rgba(0, 0, 0, 0.959);
}
/* 立即支付 */
.payBox{
	width: 220rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin: 0;
	color: white;
	background-color:red;
	border-radius: 50rpx;
}
/* 地图部分 */
map {
		width: 100%;
		height: 600rpx;
	}
</style>
